<script>
import { GlLink, GlTruncate } from '@gitlab/ui';

export default {
  name: 'VulnerabilityPath',
  components: {
    GlLink,
    GlTruncate,
  },
  props: {
    location: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  computed: {
    fileUrl() {
      const { startLine: start, endLine: end, blobPath } = this.location;
      const lineNumber = end > start ? `${start}-${end}` : start;

      if (!blobPath) {
        return '';
      }

      return `${blobPath}${lineNumber ? `#L${lineNumber}` : ''}`;
    },
    locationString() {
      const { image, file, startLine, path } = this.location;

      if (image) {
        return image;
      }

      if (file && startLine) {
        return `${file}:${startLine}`;
      }

      if (path && !file) {
        return path;
      }

      return file;
    },
    hasBlobPath() {
      return Boolean(this.location.blobPath);
    },
    shouldShowVulnerabilityPath() {
      return Boolean(this.locationString);
    },
  },
};
</script>

<template>
  <div v-if="shouldShowVulnerabilityPath">
    <gl-link v-if="hasBlobPath" :href="fileUrl">
      <gl-truncate :text="locationString" position="middle" />
    </gl-link>
    <gl-truncate v-else :text="locationString" position="middle" />
  </div>
</template>
